<h4 class="gh-main-section-header small bn">Newsletters</h4>
<div class="gh-main-section-content bordered {{unless this.suppressionData.suppressed 'gh-member-newsletter-section'}}">
    {{#unless this.suppressionData.suppressed}}
        {{#each this.newsletters as |newsletter|}}
            <div class="gh-member-newsletter-row" data-test-member-settings-switch>
                <div>
                    <h4 class="gh-member-newsletter-title">{{newsletter.name}}</h4>
                </div>
                <div class="for-switch xs {{if this.suppressionData.suppressed 'disabled'}}">
                    <label class="switch" for={{newsletter.forId}}>
                        <Input
                            @checked={{newsletter.subscribed}}
                            @type="checkbox"
                            id={{newsletter.forId}}
                            name="subscribed"
                            data-test-checkbox="member-subscribed"
                            {{on "click" (fn this.updateNewsletterPreference newsletter)}}
                        />
                        <span class="input-toggle-component"></span>
                    </label>
                </div>
            </div>
        {{/each}}
    {{/unless}}

    {{#if this.suppressionData.suppressed}}
        <div class="gh-members-no-data gh-member-newsletter-no-data">
            {{#if (eq this.suppressionData.reason 'fail')}}
                {{svg-jar "suppression-notice-bounced" class="gh-member-newsletter-icon"}}
            {{/if}}

            {{#if (eq this.suppressionData.reason 'spam')}}
                {{svg-jar "suppression-notice-flagged" class="gh-member-newsletter-icon"}}
            {{/if}}

            <h4>Email disabled</h4>

            <p>
                {{#if (eq this.suppressionData.reason 'fail')}}
                    Bounced on {{this.suppressionData.date}}
                {{/if}}

                {{#if (eq this.suppressionData.reason 'spam')}}
                    Flagged as spam on {{this.suppressionData.date}}
                {{/if}}

                <a class="midgrey" href="https://ghost.org/help/disabled-emails" target="_blank" rel="noopener noreferrer">Learn more</a>
            </p>
        </div>
    {{else}}
        <div class="gh-member-newsletter-footer middarkgrey">
            If disabled, member will <em>not</em> receive newsletter emails
        </div>
    {{/if}}
</div>
